<template>
  <div class="product_detail">
    <header>
      <BaseNavBar title="商品详情" is-nav="true" />
    </header>
    <Card>
      <section class="product_detail_item">
        <van-image :src="`/api${productDetail?.mainImage}`" v-if="productDetail?.mainImage"
          class="product_detail_item_image" />
        <p class="product_detail_item_no">编号：{{ productDetail?.productNo }}</p>
        <p class="product_detail_item_name">菜品：{{ productDetail?.name }}</p>
        <p class="product_detail_item_tag">类别：<van-tag type="primary"> {{ productDetail?.categoryName }}</van-tag></p>
        <p class="product_detail_item_price">价格：{{ `¥ ${productDetail?.price}元 / ${productDetail?.unit}` }}</p>
        <p class="product_detail_item_salesVolume">销量：{{ productDetail?.salesVolume }}</p>
        <p class="product_detail_item_status">状态：
          <van-tag type="success" v-if="productDetail?.status === 1"> 上架</van-tag>
          <van-tag type="error" v-if="productDetail?.status === 2"> 下架</van-tag>
        </p>
        <p class="product_detail_item_description">
          描述：{{ productDetail?.description }}
        </p>
        <p class="product_detail_item_shop">店家：{{ productDetail?.merchantName }}</p>
        <p class="product_detail_item_time">加入该店时间：{{ productDetail?.createTime }}</p>
      </section>
    </Card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { getProductDetail } from '@/apis/product';

const route = useRoute();
const productDetail = ref({});

const init = async () => {
  const { data } = await getProductDetail(route.params?.id);
  productDetail.value = data;
};

onMounted(() => {
  init();
});

</script>

<style lang="less" scoped>
.product {
  &_detail {
    &_item {
      &_image {
        width: 100%;
        height: 160px;
      }

      &_no {
        margin-top: 4px;
        font-size: 14px;
        color: #666;
      }

      &_name {
        margin-top: 4px;
        font-size: 14px;
        color: #333;
      }

      &_tag {
        margin-top: 4px;
        font-size: 14px;
        color: #666;
      }

      &_price {
        margin-top: 4px;
        font-size: 14px;
        color: #f50;
      }

      &_salesVolume {
        margin-top: 4px;
        font-size: 14px;
        color: #666;
      }

      &_status,&_shop,&_time {
        margin-top: 4px;
        font-size: 14px;
        color: #666;
      }

      &_description {
        margin-top: 4px;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
